<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-09-06 14:47:00
 * @LastEditors: 关德参 2257609862@qq.com
 * @LastEditTime: 2024-09-15 15:23:34
 * @FilePath: /task-admin/src/views/assets-list/components/ProjectReturnManagement/form.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="content">
    <div class="pt-16px pb-16px">
      <el-input
        v-model="searchName"
        style="width: 100%"
        :placeholder="$t('common.searchPlaceholder')"
      >
        <template #append>
          <el-button @click="handleSearch" :icon="Search" />
        </template>
      </el-input>
    </div>
    <el-table
      :data="newTableData"
      :stripe="true"
      :header-cell-style="{
        'background-color': '#F6F7F9',
        color: '#8B8B99',
      }"
      style="width: 100%"
    >
      <el-table-column
        :label="$t('common.productName')"
        :show-overflow-tooltip="true"
        :min-width="120"
        prop="asset_name"
      />
      <el-table-column
        :label="$t('common.quantity')"
        :min-width="80"
        align="right"
        prop="qty"
      />

      <el-table-column
        :label="$t('common.returnQuantity')"
        :show-overflow-tooltip="true"
        :width="140"
        align="center"
      >
        <template #default="scope">
          <el-input-number
            style="width: 100px"
            v-model="scope.row.num"
            :min="0"
            :max="scope.row.qty"
            @change="handleNumChange($event, scope.row)"
          />
        </template>
      </el-table-column>

      <!-- <el-table-column
        :label="
          type === 'lease' ? $t('common.originPrice') : $t('common.unitPrice')
        "
        :min-width="100"
        align="right"
        :prop="type === 'lease' ? 'asset_origin_price' : 'unit_price'"
      />
      <el-table-column
        :label="$t('common.priceDifference')"
        :min-width="100"
        align="right"
        prop="price_dif"
      /> -->
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { Goods } from "@/api/returnassets/model";
const props = withDefaults(
  defineProps<{
    tableData: Goods[];
    type: string;
  }>(),
  {
    tableData: () => {
      return [];
    },
    type: "",
  }
);

const allTableData = ref<Goods[]>([]);
const newTableData = ref<Goods[]>([]);
const searchName = ref("");
const handleSearch = () => {
  newTableData.value = [];
  // allTableData.value.forEach((item) => {
  //   if (item?.asset_name && item?.asset_name.includes(searchName.value)) {
  //     newTableData.value.push(item);
  //   }
  // });
  newTableData.value = allTableData.value.filter((item) => {
    if (item?.asset_name) {
      return item?.asset_name.includes(searchName.value);
    }
  });
};

const { tableData } = toRefs(props);
watch(
  tableData,
  (newVal, oldVal) => {
    if (newVal) {
      allTableData.value = newVal.map((item) => {
        let price_dif =
          props.type !== "lease"
            ? 0
            : Number(item.asset_origin_price) * Number(item.qty);
        return { ...item, price_dif, num: 0 };
      });
      handleSearch();
    }
  },
  { immediate: true }
);

const handleNumChange = (value: any, row: Goods) => {
  row.price_dif =
    props.type !== "lease"
      ? Number(row.unit_price) * Number(value)
      : (Number(row.qty) - Number(value)) * Number(row.asset_origin_price);
};

defineExpose({ allTableData });
</script>

<style scoped>
/* @import url(); 引入公共css类 */
</style>
